<template>
  <!-- 普通申请 -->
  <div :class="{
    'list-item': true,
    'pending':type=='pendingCustOrders', // 申请中
    'general': type == 'generalCanApplyCustOrders', // 普通申请
    'collection': type == 'productCollectionList',
  }">
    <div class="list-item-header">
      <span v-if="type === 'productCollectionList'">{{product.name}}</span>
      <span v-else>{{product.productName}}</span>
    
    </div>
    <div class="list-item-symbol">
      <span>Loan amount</span>
      <!--type==product.reloan == 1  的复贷 -->
      <span class="sure-apply loan" v-if="product.reloan == 1 || type ==='productCollectionList'">100% loan</span>
    <!-- <div class="sure-apply" v-else>popular</div> -->
    </div>
    <div class="list-item-content">
      <div class="content-left">
        <span class="coin">₱</span>
        <p class="amount">
          <span v-if="type === 'productCollectionList'">{{ product.amount | formatCurrency(',') }}</span>
          <span v-else>{{ product.contractAmount | formatCurrency(',') }}</span>
        </p>
      </div>
      <div class="content-right">
        <div class="pend applyBtn disabled" v-if="type=='pendingCustOrders'">
          <button class="btn-ui">Pending</button>
        </div>
        <div :class="{ 'applyBtn': true, 'disabled': product.frozenDays }"
          v-else @click="chooseChange">
          <button class="btn-ui" v-if="product.reloan == 1 && type !== 'defaultApplyCustOrders'" >Loan again</button>
          <button class="btn-ui" v-else>Apply</button>
        </div>
      </div>
    </div>
    <p v-if="product.frozenDays == 1" class="loan-amount-title">Try tomorrow</p>
    <p v-if="product.frozenDays > 1" class="loan-amount-title">Available after {{ product.frozenDays }} days</p>
  </div>
</template>
<script>
export default {
  props: {
    product: {
      default: () => {
      }
    },
    type: ''
  },
  data() {
    return {
      isChoose: false
    };
  },
  methods: {
    chooseChange() {
      if (this.product.frozenDays >= 1) {
        return;
      }
      this.$emit('chooseChange', this.product)
    },
  }
};
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>